<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-button type="primary" style="margin-bottom: 10px" @click="
                addCatDialog = true;
            getCates2();
            ">添加分类</el-button>
            <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" border row-key="cat_id"
                v-loading="loading">
                <el-table-column type="index" label="#" width="50px">
                    <template slot-scope="{ row }">
                        <span v-if="getFirst.indexOf(row) != -1">
                            {{ getFirst.indexOf(row) + 1 }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="cat_name" label="分类名称" width="309px">
                </el-table-column>
                <el-table-column label="是否有效">
                    <template slot-scope="{ row: { cat_deleted } }">
                        <i v-if="!cat_deleted" class="el-icon-success" style="color: #42cd32"></i>
                        <i v-else class="el-icon-error" style="color: red"></i>
                    </template>
                </el-table-column>
                <el-table-column label="排序">
                    <template slot-scope="{ row: { cat_level } }">
                        <el-tag v-if="cat_level == 0">{{ level_arr[cat_level] }}</el-tag>
                        <el-tag v-else-if="cat_level == 1" type="success">{{
                            level_arr[cat_level]
                        }}</el-tag>
                        <el-tag v-else-if="cat_level == 2" type="danger">{{
                            level_arr[cat_level]
                        }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px">
                    <template slot-scope="{ row }">
                        <el-button type="primary" size="small" @click="editCatDialog = true; openEdit(row);" class="btn">
                            <i class="el-icon-edit"></i>编辑
                        </el-button>
                        <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delCat(row)">
                            <el-button type="danger" size="small" slot="reference">
                                <i class="el-icon-delete"></i>删除
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="query.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="query.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 20px">
            </el-pagination>
        </el-card>
        <!-- 添加分类对话框 -->
        <el-dialog title="添加分类" :visible.sync="addCatDialog" width="50%" @close="close">
            <el-form>
                <el-form-item label="分类名称">
                    <el-input v-model="addCatData.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父类层级">
                    <el-cascader :options="selectData" v-model="addCatData.cat_pid"
                        :props="{ checkStrictly: true, value: 'cat_id', label: 'cat_name' }" clearable @change="getValue">
                    </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCatDialog = false">取 消</el-button>
                <el-button type="primary" @click="
                    addCatDialog = false;
                addCate();
                ">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑对话框 -->
        <el-dialog title="修改分类" :visible.sync="editCatDialog" width="50%">
            <el-form>
                <el-form-item label="分类名称">
                    <el-input v-model="editCatData.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editCatDialog = false">取 消</el-button>
                <el-button type="primary" @click="editCate();">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 添加分类对话框开关
            addCatDialog: false,
            // 编辑分类对话框开关
            editCatDialog: false,
            query: {
                //每页几条
                pagesize: 5,
                //当前第几页
                pagenum: 1,
            },
            addCatData: {
                cat_name: "",
                cat_pid: 0,
                cat_level: 0,
            },
            editCatData: {
                cat_id: "",
                cat_name: "",
            },
            total: 5,
            tableData: [],
            selectData: [],
            level_arr: ["一级", "二级", "三级"],
            loading: false
        };
    },
    methods: {
        async addCate() {
            if (this.addCatData.cat_name == '') return this.$message.warning('分类名称不能为空');
            const { data: { meta } } = await this.$http.post("categories", this.addCatData);
            if (meta.status !== 201) return this.$message.error("添加分类失败");
            this.$message.success("添加分类成功");
            this.list();
        },
        // 当级联下拉框选项改变时触发
        getValue(v) {
            if (v.length !== 0) {
                // 父id的处理，只需要取数组的最后一个元素   数组。length-1
                this.addCatData.cat_pid = v[v.length - 1];
                // 级别的处理
                this.addCatData.cat_level = v.length;
            } else {
                // 添加一级分类处理
                this.addCatData.cat_pid = 0;
                this.addCatData.cat_level = 0;
            }
        },
        handleSizeChange(val) {
            this.query.pagesize = val;
            this.list();
        },
        handleCurrentChange(val) {
            this.query.pagenum = val;
            this.list();
        },
        openEdit(row) {
            this.editCatData.cat_id = row.cat_id;
            this.editCatData.cat_name = row.cat_name;
        },
        async editCate() {
            const { data } = await this.$http.put(`categories/${this.editCatData.cat_id}`, this.editCatData);
            if (this.editCatData.cat_name == '') return this.$message.error(' 分类名称不能为空');
            if (meta.status !== 200) return this.$message.error('修改分类名失败');
            this.$message.success('修改成功');
            this.editCatDialog = false;
            this.list();
        },
        async list() {
            this.loading = true;
            let { data: { data: { total, result }, meta } } = await this.$http.get("categories", { params: this.query });
            if (meta.status !== 200) return this.$message.error("获取分类列表失败");
            this.loading = false;
            this.tableData = result;
            this.total = total;
        },
        async getCates2() {
            const { data: { data, meta } } = await this.$http("categories", { params: { type: 2 } });
            if (meta.status !== 200) this.$message.error("获取分类列表失败");
            this.selectData = data;
        },
        async delCat(row) {
            const { data: { meta } } = await this.$http.delete(`categories/${row.cat_id}`);
            if (meta.status !== 200) this.$message.error("删除分类失败");
            this.$message.success("删除分类成功");
            this.list();
        },
        close() {
            this.addCatData.cat_pid = [];
            this.addCatData.cat_name = '';
        }
    },

    computed: {
        getFirst() {
            // 把所有分类里的第一级筛选出来
            return this.tableData.filter((item) => item.cat_level == 0);
        },
    },
    created() {
        this.list();
    },
};
</script>
<style lang="less" scoped>
.box-card {
    margin: 20px 0 60px 0;
    box-sizing: border-box;
}

.btn {
    margin: 0 20px 0 10px;
}
</style>